<template>
  <div class="calendar-container">
    <van-nav-bar title="日历查看" left-arrow @click-left="$router.back()" />
    
    <div class="calendar-content">
      <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
      
      <van-cell-group class="date-info">
        <van-cell title="选择日期" :value="selectedDate" is-link @click="showCalendar = true" />
      </van-cell-group>
      
      <div class="schedule-list" v-if="schedules.length > 0">
        <h3>当日课程安排</h3>
        <van-card
          v-for="schedule in schedules"
          :key="schedule.id"
          :title="schedule.courseName"
          :desc="`${schedule.timeSlot} | ${schedule.venue} | ${schedule.teacher}`"
          :thumb="schedule.courseImage"
        >
          <template #tags>
            <van-tag type="primary">{{ schedule.className }}</van-tag>
          </template>
        </van-card>
      </div>
      
      <van-empty v-else description="当日暂无课程安排" />
    </div>
    
    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="wap-home-o" to="/dashboard">首页</van-tabbar-item>
      <van-tabbar-item icon="calendar-o" to="/calendar">日历</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/schedule">排课</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/master/teacher">管理</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'

const showCalendar = ref(false)
const selectedDate = ref(new Date().toLocaleDateString())
const activeTab = ref(1)
const schedules = ref([])

const onConfirm = (date) => {
  selectedDate.value = date.toLocaleDateString()
  showCalendar.value = false
  loadSchedules(date)
}

const loadSchedules = async (date) => {
  try {
    // 这里应该调用API获取指定日期的课程安排
    // const response = await api.getSchedulesByDate(date)
    // schedules.value = response.data
    
    // 模拟数据
    schedules.value = [
      {
        id: 1,
        courseName: '高等数学',
        className: '计算机1班',
        teacher: '张老师',
        venue: '教学楼A101',
        timeSlot: '08:00-09:40'
      },
      {
        id: 2,
        courseName: '数据结构',
        className: '计算机1班',
        teacher: '李老师',
        venue: '教学楼A102',
        timeSlot: '10:00-11:40'
      }
    ]
  } catch (error) {
    showToast('加载课程安排失败')
    console.error(error)
  }
}

onMounted(() => {
  loadSchedules(new Date())
})
</script>

<style lang="scss" scoped>
.calendar-container {
  padding-bottom: 50px;
}

.calendar-content {
  padding: $padding-md;
}

.date-info {
  margin-bottom: $padding-lg;
  border-radius: $border-radius-lg;
  overflow: hidden;
}

.schedule-list {
  h3 {
    margin-bottom: $padding-md;
    color: $text-color;
    font-size: $font-size-lg;
  }
  
  .van-card {
    margin-bottom: $padding-sm;
    border-radius: $border-radius-md;
    overflow: hidden;
  }
}
</style>